/* 去除内外边距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* -----------------------导航栏上方部分------------------------- */
.navtop {
    width: 1465px;
    margin: 0 auto;
    height: 142px;
    overflow: hidden;
    /* border: 1px solid; */
}

/* 导航栏上方部分左边60%部分盒子 */
.navtop>div:nth-of-type(1) {
    width: 60%;
    height: 142px;
    /* background-color: pink; */
    float: left;
}

/* 导航栏上方部分左边logo图片 */
.navtop>div:nth-of-type(1)>div:nth-of-type(1)>img {
    margin-left: 200px;
}

/* 导航栏上方部分左边60%部分盒子里面的盒子设置左浮动 */
.navtop>div:nth-of-type(1)>div {
    height: 105px;
    float: left;
}

/* 导航栏上方部分左边装文字的盒子 */
.navtop>div:nth-of-type(1)>div:nth-of-type(2) {
    margin-top: 36px;
    margin-left: 24px;
}

/* 导航栏上方部分左边文字属性 */
.navtop>div:nth-of-type(1)>div>P {

    font-size: 22px;
    height: 71px;
    line-height: 32px;
}

/* 导航栏上方部分右边40%部分盒子 */
.navtop>div:nth-of-type(2) {
    width: 40%;
    height: 142px;
    /* background-color: rgb(165, 25, 48); */
    float: left;
}

/* 导航栏上方部分右边40%部分盒子上部分 */
.navtop>div:nth-of-type(2)>div:nth-of-type(1) {
    margin-top: 10px;
    margin-bottom: 17px;
    margin-left: 65px;
    height: 20px;

    /* background-color: purple; */
}

.navtop>div:nth-of-type(2)>div:nth-of-type(1)>a {
    display: inline-block;
    text-align: center;
    width: 100px;
    border-right: 3px solid;
    text-decoration: none;
    color: black;
}

.navtop>div:nth-of-type(2)>div:nth-of-type(1)>a:hover>p {
    color: rgb(234, 152, 156);
}

.navtop>div:nth-of-type(2)>div:nth-of-type(1)>span:nth-of-type(3) {
    border-right: transparent;
}

/* 导航栏上方部分右边40%部分盒子中部分 */
.navtop>div:nth-of-type(2)>div:nth-of-type(2)>img {
    margin-left: 90px;
    transform: scale(1.2);
}

/* 导航栏上方部分右边40%部分盒子下部分 */
.navtop>div:nth-of-type(2)>div:nth-of-type(3) {
    width: 230px;
    height: 33px;
    background-color: rgb(38, 140, 144);
    margin-top: 9px;
    margin-left: 135px;
    text-align: center;
    line-height: 33px;
    color: white;
}

.navtop>div:nth-of-type(2)>div:nth-of-type(3)>a {
    color: white;
    text-decoration: none;
}

/* -------------------------导航栏----------------------------- */
.nav {
    /* 宽度不给，与浏览器一样宽 */
    /* width: 100%; */
    /* width: 1465px; */
    height: 50px;
    background-color: rgb(38, 140, 144);
    text-align: center;
    padding-left: 200px;
}
/* ul不用设置，bug修改：出现水平混动条 */
/* .nav>ul{
    width: 100%;
    margin: 0 auto;
} */
.nav>ul>li {
    line-height: 50px;
    width: 8%;
    height: 50px;
    float: left;
    list-style: none;

}

/* 二级盒子 */
.nav>ul>li>ul>li {
    list-style: none;
}

/* 链接文字白色 */
.nav>ul>li>a {
    text-decoration: none;
    color: white;
}

/* 隐藏的透明盒子 */
.transparent {
    width: 1020px;
    height: 230px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    background-color: rgba(124, 130, 140, 70%);
    position: relative;
    z-index: 2;
    padding-top: 20px;
    transform: translate(-100px, 0px);
    display: none;
}

/* 隐藏的透明盒子鼠标放上去显示 */
.nav>ul>li:nth-of-type(2):hover .transparent {
    display: block;
}

/* 装图片的盒子 */
.transparent div {
    width: 200px;
    height: 150px;
    float: left;
    /* border: 1px solid; */
}

/* 图片下面的文字 */
.transparent div p {
    color: red;
    font-weight: 700;
    line-height: 35px;

}

/* 放客服电话的盒子 */
.transparent div:last-child {
    width: 411px;
    height: 50px;
}

/* 客服电话图片 */
.transparent div:last-child>img {
    position: relative;
    left: -20px;
    width: 35px;
    height: 35px;
}

/* 客服电话文字 */
.transparent div:last-child>span {
    position: absolute;
    right: 23px;
    display: inline-block;
    width: 192px;
    height: 40px;
    line-height: 40px;
}

/* 客服电话上面的空盒子 */
.transparent div:nth-of-type(4) {
    width: 411px;
    height: 149px;
    /* border: 1px solid; */
}

/* 轮播图动画 */
@keyframes run {
    10% {
        transform: translate(0px, 0px);
    }

    20%,
    30% {
        transform: translate(-1465px, 0px);
    }

    40%,
    50% {
        transform: translate(-2930px, 0px);
    }

    60%,
    70% {
        transform: translate(-4495px, 0px);
    }

    80%,
    90% {
        transform: translate(-5860px, 0px);
    }

    100% {
        transform: translate(-7325px, 0px);
    }
}

/* --------------------------轮播图-------------------------- */
.zt {
    width: 1465px;
    height: 557px;
    margin: 0 auto;
    /* border: 1px solid; */
    overflow: hidden;
}

/* 放轮播图图片盒子 */
.zt1 {
    width: 8790px;
    height: 560px;
    animation: run 10s linear infinite;
}

/* 轮播图图片 */
.zt img {
    width: 1465px;
    height: 560px;
    float: left;
}

/* ---------------------------新品特价------------------------- */
.newArrival {
    /* 宽度不给，与浏览器一样宽 */
    /* width: 100%; */
    height: 105px;
    text-align: center;
    padding-top: 20px;
    font-weight: 400;
    font-size: 25px;
}

/* -----------------------新品特价下方盒子---------------------- */
.newArrivalbottomimg {
    /* 宽度不给，与浏览器一样宽 */
    /* width: 100%; */
    height: 200px;
    text-align: center;
}

/* 承装图片、文字、遮罩层 */
.newArrivalbottomimg>div {
    width: 230px;
    height: 160px;
    margin: 0px 10px;
    display: inline-block;
    position: relative;
}

/* 遮罩层 */
.newArrivalbottomimg>div>div {
    width: 0px;
    height: 160px;
    position: absolute;
    transition: all 1s ease;
}

/* 四种遮罩层颜色 */
.newArrivalbottomimg>div>.zzc1 {
    background-color: rgba(56, 102, 103, 50%);
}

.newArrivalbottomimg>div>.zzc2 {
    background-color: rgba(136, 39, 34, 50%);
}

.newArrivalbottomimg>div>.zzc3 {
    background-color: rgba(56, 151, 167, 50%);
}

.newArrivalbottomimg>div>.zzc4 {
    background-color: rgba(229, 179, 134, 50%);
}

/* 鼠标放上去遮罩层变长 */
.newArrivalbottomimg>div:hover>div {
    width: 230px;
}

/* 装文字的盒子 */
.newArrivalbottomimg>div>span {
    width: 200px;
    height: 40px;
    background-color: rgba(94, 15, 15, 70%);
    color: white;
    position: absolute;
    top: 95px;
    left: 15px;
    z-index: 3;
}

/* 鼠标放在大盒子上装文字的盒子移动 */
.newArrivalbottomimg>div:hover>span {
    animation: textRun 1s linear infinite alternate
}

/* 文字 */
.newArrivalbottomimg>div>span>p {
    font-size: 14px;
    text-align: left;
}

/* 文字动画 */
@keyframes textRun {
    100% {
        transform: translate(0px, 10px);
    }
}

/* ----------------------产品分类------------------------------- */
.PRODUCT {
    width: 1000px;
    margin: 0 auto;
    height: 60px;
    background-color: rgb(47, 151, 144);
    overflow: hidden;
}

.PRODUCT>img:last-child {
    float: right;
}

/* -------------------产品分类下方导航栏------------------------- */
.nav2 {
    width: 1000px;
    height: 80px;
    margin: 0 auto;
    /* background-color: aqua; */
}

/* 清除浮动 */
.nav2>ul {
    overflow: hidden;
}

/* 产品分类下方导航栏每个li */
.nav2>ul>li {
    height: 60px;
    font-size: 20px;
    line-height: 70px;
    margin-right: 150px;
    font-weight: 700;
    list-style: none;
    float: left;
}

/* 鼠标放上去下边框显示 */
.nav2>ul>li:hover {
    border-bottom: 4px solid rgb(0, 136, 147);
}

/* 最后一个li不要右边距，否则挤下去了 */
.nav2>ul>li:last-child {
    margin-right: 0px;
}

/* --------------------商品图片介绍部分------------------------ */
.f {
    width: 1000px;
    /* 高度由内容决定 */
    /* height: 50px; */
    margin: 0 auto;
    /* border: 1px solid; */
    overflow: hidden;
    text-align: center;
}

/* 放内容的盒子 */
.f>div {
    float: left;
}

/* 鼠标放到放内容的盒子上,文字变红 */
.f>div:hover p {
    color: rgb(202, 27, 68);
}

/* 盒子里的图片 */
.f>div>img {
    width: 225px;
    height: 270px;
    margin-right: 33px;
    margin-bottom: 10px;
}

/* 最后一个盒子不要右边距，否则挤下去了 */
.f>div:nth-of-type(4)>img,
.f>div:nth-of-type(8)>img {
    margin-right: 0px;
}

.f>div>.fTextbox {

    width: 225px;
    height: 70px;
}

.textspan {
    display: inline-block;
    width: 145px;
    height: 30px;
    margin-top: 5px;
    line-height: 30px;
    border-top: 3px solid rgb(0, 136, 147);
}

.textspan>span:first-child {
    color: rgb(234, 156, 58);
}

.textspan>span:last-child {
    margin-left: 10px;
    font-size: 18px;
    font-weight: 600;
    color: rgb(234, 156, 58);
}

/* ---------------------鑫喜钻大logo---------------------------- */
.logo {
    /* 宽度不给，与浏览器一样宽 */
    /* width: 100%; */
    height: 150px;
    /* border: 1px solid; */
    text-align: center;
    position: relative;
}

/* 大logo图片 */
.logo>img {
    margin: 20px auto;
    position: relative;
    /* z-index: 2; */
}

/* 大logo左右水平线 */
.logo>hr {
    top: 71px;
    /* 需要设置宽高 */
    width: 100%;
    height: 5px;
    position: absolute;
    background-color: rgb(49, 147, 148);
}

/* ------------------下方五张动画图片盒子----------------------- */
.bottomImgBox {
    width: 1000px;
    height: 500px;
    margin: 0 auto;
    /* border: 1px solid; */
    /* overflow: hidden; */
}

/* 分为三部分浮动布局 */
.bottomImgBox>div {
    float: left;
    margin-right: 20px;
    position: relative;
}

/* 最后一个盒子不要右边距 */
.bottomImgBox>div:nth-of-type(3) {
    margin-right: 0px;
}

/* 第一、三的盒子大小 */
.bottomImgBox>div:nth-of-type(1),
.bottomImgBox>div:nth-of-type(3) {
    width: 290px;
    height: 450px;
}

/* 中间的盒子大小 */
.bottomImgBox>div:nth-of-type(2) {
    width: 380px;
    height: 450px;
    position: relative;
    z-index: 2;
}

/* 第一、三盒子里面图片宽度 */
.bottomImgBox>div:nth-of-type(1)>div>img,
.bottomImgBox>div:nth-of-type(3)>div>img {
    width: 290px;
    margin-bottom: 17px;
}

/* 中间盒子里面图片宽度 */
.bottomImgBox>div:nth-of-type(2)>img {
    width: 380px;
    height: 450px;
}

/* 图片里面文字的共同属性 */
.bottomImgBox>div>div>span {
    display: inline-block;
    width: 289px;
    height: 30px;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    line-height: 30px;
    color: white;
    background-color: rgb(32, 27, 26);
}

/* 第一部分上面图片的文字属性 */
.bottomImgBox>div:first-child>div:nth-of-type(1)>span {
    position: absolute;
    top: 125px;
    left: 1px;
}

.bottomImgBox>div:first-child>div:nth-of-type(2) {
    z-index: 2;
    position: relative;
}

/* 第一部分下面图片的文字属性 */
.bottomImgBox>div:first-child>div:nth-of-type(2)>span {
    width: 287px;
    position: absolute;
    bottom: 40px;
    left: 3px;
    background-color: rgba(98, 93, 94, 75%);
}

/* 第三部分上面图片的文字属性 */
.bottomImgBox>div:last-child>div:nth-of-type(1)>span {
    width: 287px;
    position: absolute;
    top: 200px;
    left: 3px;
    background-color: rgb(52, 28, 24);
}

/* 第三部分下面图片的文字属性 */
.bottomImgBox>div:last-child>div:nth-of-type(2)>span {
    width: 287px;
    position: absolute;
    bottom: 20px;
    left: 3px;
    background-color: rgba(52, 28, 24, 50%);
}

/* ------------图片转换效果-------------- */
/* 第一部分上面盒子鼠标放上去旋转 */
.bottomImgBox>div:nth-of-type(1)>div:first-child:hover {
    transform: rotate(-30deg);
}

/* 第一部分下面盒子鼠标放上去放大 */
.bottomImgBox>div:nth-of-type(1)>div:last-child:hover {
    transform: scale(1.5);
}

/* 中间盒子鼠标放上去放大 */
.bottomImgBox>div:nth-of-type(2):hover {
    transform: scale(1.5);
}

/* 第三部分上面图片鼠标放上去旋转 */
.bottomImgBox>div:nth-of-type(3)>div:first-child:hover {
    transform: rotate3d(0, 1, 0, 360deg);
}

/* 第三部分下面图片鼠标放上去旋转 */
.bottomImgBox>div:nth-of-type(3)>div:last-child:hover {
    transform: rotate(360deg) scale(0.5);
}

/* transition不能放在hover里,放到外面里,
这样移入移出一样缓慢,不然只对hover移上去有缓慢效果 */
.bottomImgBox>div:nth-of-type(1)>div:first-child,
.bottomImgBox>div:nth-of-type(1)>div:last-child,
.bottomImgBox>div:nth-of-type(2),
.bottomImgBox>div:nth-of-type(3)>div:last-child,
.bottomImgBox>div:nth-of-type(3)>div:first-child:hover {
    transition: all 1s linear;
}

/* ---------------------最下方的图片盒子--------------------- */
.lastImgBox {
    /* 宽度不给，与浏览器一样宽 */
    /* width: 100%; */
    height: 135px;
    background-color: rgb(12, 148, 144);
    text-align: center;
}